<script setup>
import { useVirtualList } from '@vueuse/core'
const allItems = Array.from(Array(999).keys()).map((i) => ({
  height: i % 2 === 0 ? 42 : 84,
  size: i % 2 === 0 ? 'small' : 'large'
}))
const { list, containerProps, wrapperProps } = useVirtualList(allItems, {
  itemHeight: (i) => allItems[i].height + 8,
  overscan: 10
})
</script>

<template>
  <div v-bind="containerProps" class="container">
    <div v-bind="wrapperProps">
      <div
        v-for="{ index, data } in list"
        :key="index"
        :style="{
          height: `${data.height}px`,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }"
      >
        第 {{ index }} 行 <span opacity="70" m="l-1">（{{ data.size }}）</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 300px;
  overflow-y: auto;
}
</style>
